<template>
  <!-- 复制移动个人树弹窗 -->
  <div class="pagevue">
    <el-button type="primary" @click="openDialog">选择企业文件</el-button>
    <el-dialog title="" v-model="dialogRestore" width="550px" :close-on-click-modal="false" @close="cloeRestoreDialog">
      <template #header>
        <div>
          <svg-icon icon-class="file-close" style="margin-right: 5px"></svg-icon>
          <span>选择文件位置</span>
        </div>
      </template>

      <div class="treeElClass">
        <el-tree
          ref="treeRestore"
          :data="treeRestoreList"
          :props="defaultProps"
          node-key="id"
          class="filter-tree"
          :lazy="true"
          :load="loadNode"
          :highlight-current="true"
          :default-expanded-keys="expandedKeys"
          :expand-on-click-node="false"
          @node-click="treeRestoreNodeClick"
        >
          <template #default="{ node, data }">
            <span @dblclick="treeRestoreDblclick(node, data)">
              <!-- <svg-icon :icon-class="node.expanded ? 'file-open' : 'file-close'"></svg-icon>
            <span>{{ node.label }}</span> -->
              <svg-icon :icon-class="selectSvgIcons(data)"></svg-icon>
              <span class="realName_class">{{ data.realName }}{{ data.suffix ? '.' + data.suffix : '' }}</span>
            </span>
          </template>
        </el-tree>
      </div>

      <div class="file_path">
        <el-divider direction="vertical" class="label_divider"></el-divider>
        <span> 路径：</span>
        <div class="file_path_class">{{ treeRestorePathObj.path}}</div>
        <!-- <el-button text type="primary" class="btn_box" @click="selectRootDirectory">选择根目录</el-button> -->
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="SureDialogRestoreClick">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { apiTreeFileSelectTree } from '@/api/enterprise/enterpriseConfig/index';
const { proxy } = getCurrentInstance() as any;
const props = defineProps({
  parentId: {
    type: Number,
    default: 0
  }
});
const dialogRestore = ref(false);
const defaultProps = reactive({
  //树
  children: 'children',
  label: 'realName',
  isLeaf: 'leaf'
});
const treeRestoreList = ref([]);
const expandedKeys = ref([0]);
const treeRestorePathObj = ref({
  path: ''
});

const emit: any = defineEmits(['sureClick']);

const openDialog = () => {
  dialogRestore.value = true;
  getTreeList();
};

const selectSvgIcons = (v) => {
  return 'file-close';
};

// 获取树请求
const getTreeList = async () => {
  console.log(props.parentId);
  
  let res;
  res = await apiTreeFileSelectTree({ sort: ['sort Asc', 'type Desc', 'create_time Desc'], parentId: props.parentId });
  console.log(res, '获取树请求');

  // treeRestorePathObj.value = res.data.children.superiorsPath;
  
  // if (!res.data.path) {
  //   res.data.path = '/' + res.data.realName;
  // }
  treeRestoreList.value = res.data.children;
  // dialogRestore.value = true;
};

// 获取树
const loadNode = async (node, resolve) => {
  let res;
  if (node.level == 0) {
    return resolve(node.data);
  }

  res = await apiTreeFileSelectTree({
    parentId: node.data.id,
    sort: ['sort Asc', 'type Desc', 'create_time Desc'],
  });

  res.data.path = '/' + res.data.realName;
  let childrenArr = res.data.children;
  return resolve(childrenArr);
};

// 点击树节点
const treeRestoreNodeClick = async (data, node) => {
  treeRestorePathObj.value = data;
};


// 关闭对话框
const cloeRestoreDialog = () => {
  dialogRestore.value = false;
  treeRestorePathObj.value = { path: '' };
};

// 双击
const treeRestoreDblclick = (node, data) => {
  treeRestorePathObj.value = data;
  SureDialogRestoreClick();
};

// 确定按钮
const SureDialogRestoreClick = () => {
  emit('sureClick', treeRestorePathObj.value);
  cloeRestoreDialog();
};

defineExpose({
  //调用组件需要导出 v-model的变量
  openDialog
});
</script>

<style lang="scss" scoped>
::deep(.el-dialog__body) {
  padding: 10px 20px !important;
}

.btn_box {
  &:hover {
    background: none !important;
  }
}

.treeElClass {
  height: 300px;
  //   max-height: 30vh;
  overflow-y: auto;
  border: 1px solid #eee;
  margin-bottom: 15px;
}
.file_path {
  display: flex;
  align-items: center;
  .file_path_class {
    flex: 1;
    border-bottom: 1px solid #eee;
    margin-right: 6px;
  }
}
.label_divider {
  width: 3px;
  background-color: #409eff;
  margin: 0 4px;
  border-radius: 2px;
}
</style>
